<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  
  
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>
    前端性能优化方法 |
    
    悲欢相通</title>
  
    <link rel="shortcut icon" href="/favicon.ico">
  
  
<link rel="stylesheet" href="/css/style.css">

  
    
<link rel="stylesheet" href="/fancybox/jquery.fancybox.min.css">

  
  
<script src="/js/pace.min.js"></script>

<meta name="generator" content="Hexo 5.2.0"></head>

<body>
<main class="content">
  <section class="outer">
  <article id="post-前端性能优化方法" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

    <div class="article-inner">
        
            <header class="article-header">
                
  
    <h1 class="article-title" itemprop="name">
      前端性能优化方法
    </h1>
  
  




            </header>
            

                
                    <div class="article-meta">
                        <a href="/2020/10/22/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E6%96%B9%E6%B3%95/" class="article-date">
  <time datetime="2020-10-22T13:37:32.000Z" itemprop="datePublished">2020-10-22</time>
</a>
                            
                    </div>
                    

                        
                            
    <div class="tocbot"></div>





                                

                                    <div class="article-entry" itemprop="articleBody">
                                        


                                            

                                                
                                                                    <h2 id="加载时优化"><a href="#加载时优化" class="headerlink" title="加载时优化"></a>加载时优化</h2><h3 id="1-减少-HTTP-请求"><a href="#1-减少-HTTP-请求" class="headerlink" title="1. 减少 HTTP 请求"></a>1. 减少 HTTP 请求</h3><font size=4>
一个完整的 HTTP 请求需要经历 DNS 查找，TCP 握手，浏览器发出 HTTP 请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等过程。
</font>

<p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC82LzI1LzE3MmU5ODY3YzFiZDY0Nzk?x-oss-process=image/format,png" alt="img"></p>
<h3 id="2-使用服务端渲染"><a href="#2-使用服务端渲染" class="headerlink" title="2. 使用服务端渲染"></a>2. 使用服务端渲染</h3><font size=4>
客户端渲染: 获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。
服务端渲染：服务端返回 HTML 文件，客户端只需解析 HTML。
</font>

<ul>
<li>优点：首屏渲染快，SEO 好。</li>
<li>缺点：配置麻烦，增加了服务器的计算压力。</li>
</ul>
<h3 id="3-静态资源使用-CDN"><a href="#3-静态资源使用-CDN" class="headerlink" title="3. 静态资源使用 CDN"></a>3. 静态资源使用 CDN</h3><font size=4>
内容分发网络（CDN）是一组分布在多个不同地理位置的 Web 服务器。我们都知道，当服务器离用户越远时，延迟越高。CDN 就是为了解决这一问题，在多个位置部署服务器，让用户离服务器更近，从而缩短请求时间。
</font>

<p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC83LzUvMTczMWYwMDE1NWQ4NzAzNw?x-oss-process=image/format,png" alt="img"></p>
<h3 id="4-将-CSS-放在文件头部，JavaScript-文件放在底部"><a href="#4-将-CSS-放在文件头部，JavaScript-文件放在底部" class="headerlink" title="4. 将 CSS 放在文件头部，JavaScript 文件放在底部"></a>4. 将 CSS 放在文件头部，JavaScript 文件放在底部</h3><font size=4>
所有放在 head 标签里的 CSS 和 JS 文件都会堵塞渲染。如果这些 CSS 和 JS 需要加载和解析很久的话，那么页面就空白了。所以 JS 文件要放在底部，等 HTML 解析完了再加载 JS 文件。
</font>

<h3 id="5-使用字体图标-iconfont-代替图片图标"><a href="#5-使用字体图标-iconfont-代替图片图标" class="headerlink" title="5. 使用字体图标 iconfont 代替图片图标"></a>5. 使用字体图标 iconfont 代替图片图标</h3><font size=4>
字体图标就是将图标制作成一个字体，使用时就跟字体一样，可以设置属性，例如 font-size、color 等等，非常方便。并且字体图标是矢量图，不会失真。还有一个优点是生成的文件特别小。
</font>

<h3 id="6-压缩文件"><a href="#6-压缩文件" class="headerlink" title="6. 压缩文件"></a>6. 压缩文件</h3><font size=4>
压缩文件可以减少文件下载时间，让用户体验性更好。
得益于 webpack 和 node 的发展，现在压缩文件已经非常方便了。
在 webpack 可以使用如下插件进行压缩：
</font>

<ul>
<li>JavaScript：UglifyPlugin</li>
<li>CSS ：MiniCssExtractPlugin</li>
<li>HTML：HtmlWebpackPlugin</li>
</ul>
<h3 id="7-图片优化"><a href="#7-图片优化" class="headerlink" title="7. 图片优化"></a>7. 图片优化</h3><font size=4>
在页面中，先不给图片设置路径，只有当图片出现在浏览器的可视区域时，才去加载真正的图片，这就是延迟加载。对于图片很多的网站来说，一次性加载全部图片，会对用户体验造成很大的影响，所以需要使用图片延迟加载。
</font>

<h3 id="8-通过-webpack-按需加载代码，减少-ES6-转为-ES5-的冗余代码"><a href="#8-通过-webpack-按需加载代码，减少-ES6-转为-ES5-的冗余代码" class="headerlink" title="8. 通过 webpack 按需加载代码，减少 ES6 转为 ES5 的冗余代码"></a>8. 通过 webpack 按需加载代码，减少 ES6 转为 ES5 的冗余代码</h3><h2 id="运行时优化"><a href="#运行时优化" class="headerlink" title="运行时优化"></a>运行时优化</h2><h3 id="9-减少重绘重排"><a href="#9-减少重绘重排" class="headerlink" title="9. 减少重绘重排"></a>9. 减少重绘重排</h3><h4 id="浏览器渲染过程"><a href="#浏览器渲染过程" class="headerlink" title="浏览器渲染过程"></a>浏览器渲染过程</h4><p><font size=4>1. 解析HTML生成DOM树。</font></p>
<p><font size=4>2. 解析CSS生成CSSOM规则树。</font></p>
<p><font size=4>3. 将DOM树与CSSOM规则树合并在一起生成渲染树。</font></p>
<p><font size=4>4. 遍历渲染树开始布局，计算每个节点的位置大小信息。</font></p>
<p><font size=4>5. 将渲染树每个节点绘制到屏幕。</font></p>
<p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC82LzI1LzE3MmVhMDM0Y2U1MzRkZmE?x-oss-process=image/format,png" alt="img"></p>
<h3 id="10-不要覆盖原生方法"><a href="#10-不要覆盖原生方法" class="headerlink" title="10. 不要覆盖原生方法"></a>10. 不要覆盖原生方法</h3><font size=4>
无论你的 JavaScript 代码如何优化，都比不上原生方法。因为原生方法是用低级语言写的（C/C++），并且被编译成机器码，成为浏览器的一部分。当原生方法可用时，尽量使用它们，特别是数学运算和 DOM 操作。
</font>

<h3 id="11-if-else-对比-switch"><a href="#11-if-else-对比-switch" class="headerlink" title="11. if-else 对比 switch"></a>11. if-else 对比 switch</h3><font size=4>
当判断条件数量越来越多时，越倾向于使用 switch 而不是 if-else。
</font>

<h3 id="12-使用-flexbox-而不是较早的布局模型"><a href="#12-使用-flexbox-而不是较早的布局模型" class="headerlink" title="12. 使用 flexbox 而不是较早的布局模型"></a>12. 使用 flexbox 而不是较早的布局模型</h3><font size=4>
在早期的 CSS 布局方式中我们能对元素实行绝对定位、相对定位或浮动定位。而现在，我们有了新的布局方式，它比起早期的布局方式来说有个优势，那就是性能比较好。
</font>

<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">flexbox</a></p>

                                                                        
                                    </div>
                                    <footer class="article-footer">
                                        <a data-url="http://ht12345.gitee.io/2020/10/22/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E6%96%B9%E6%B3%95/" data-id="ckgkugrlb0001fww80rfsco98" class="article-share-link">
                                            分享
                                        </a>
                                        
                                    </footer>

    </div>

    
        

            

                
                    
                        
                            

</article>
</section>
  <footer class="footer">
  <div class="outer">
    <div class="float-right">
      <ul class="list-inline">
  
    <li><i class="fe fe-smile-alt"></i> <span id="busuanzi_value_site_uv"></span></li>
  
    <li><i class="fe fe-bookmark"></i> <span id="busuanzi_value_page_pv"></span></li>
  
</ul>
    </div>
    <ul class="list-inline">
      <li>&copy; 2020 悲欢相通</li>
      <li>Powered by <a href="http://hexo.io/" target="_blank">Hexo</a></li>
      <li>Theme  <a target="_blank" rel="noopener" href="https://github.com/zhwangart/hexo-theme-ocean">Ocean</a></li>
    </ul>
  </div>
</footer>

</main>
<aside class="sidebar">
  <button class="navbar-toggle"></button>
<nav class="navbar">
  
    <div class="logo">
      <a href="/"><img src="/images/hexo.svg" alt="悲欢相通"></a>
    </div>
  
  <ul class="nav nav-main">
    
      <li class="nav-item">
        <a class="nav-item-link" href="/">Home</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/archives">Archives</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/gallery">Gallery</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/about">About</a>
      </li>
    
    <li class="nav-item">
      <a class="nav-item-link nav-item-search" title="搜索">
        <i class="fe fe-search"></i>
        搜索
      </a>
    </li>
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      <div class="totop" id="totop">
  <i class="fe fe-rocket"></i>
</div>
    </li>
    <li class="nav-item">
      
        <a class="nav-item-link" target="_blank" href="/atom.xml" title="RSS Feed">
          <i class="fe fe-feed"></i>
        </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
</aside>

<script src="/js/jquery-2.0.3.min.js"></script>


<script src="/js/jquery.justifiedGallery.min.js"></script>


<script src="/js/lazyload.min.js"></script>


<script src="/js/busuanzi-2.3.pure.min.js"></script>


  
<script src="/fancybox/jquery.fancybox.min.js"></script>




  
<script src="/js/tocbot.min.js"></script>

  <script>
    // Tocbot_v4.7.0  http://tscanlin.github.io/tocbot/
    tocbot.init({
      tocSelector: '.tocbot',
      contentSelector: '.article-entry',
      headingSelector: 'h1, h2, h3, h4, h5, h6',
      hasInnerContainers: true,
      scrollSmooth: true,
      positionFixedSelector: '.tocbot',
      positionFixedClass: 'is-position-fixed',
      fixedSidebarOffset: 'auto',
    });
  </script>



<script src="/js/ocean.js"></script>


</body>
</html>